<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flickr Style Image Maps</title>


<style type="text/css">
<!--

body {
  font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  background-color: #fff;
}

.imagemap {
  width: 333;
  height: 500;
  position: relative;
}

.imagemap ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.imagemap a {
  position: absolute;
	display: block;
	background-image: url(img/shim.gif);
  color: #000;
  text-decoration: none;
  border: 1px solid transparent;
}


.imagemap a .outer {
  display: block;
  border: 1px solid transparent;
}

.imagemap a .inner {
  display: block;
	width: 50px;
	height: 60px;
  border: 1px solid transparent;
}

.imagemap a:hover,
.imagemap a:focus {
  border-color: #d4d82d;
	cursor: pointer;
}

.imagemap:hover a .outer,
.imagemap:focus a .outer,
.imagemap a:hover .outer,
.imagemap a:focus .outer {
  border-color: #000;
}

.imagemap:hover a .inner,
.imagemap:focus a .inner,
.imagemap a:hover .inner,
.imagemap a:focus .inner {
  border-color: #fff;
}


.imagemap .rich a {
  top: 50px;
  left: 80px;
}

.imagemap .sophie a {
  top: 90px;
  left: 200px;
}

.imagemap .cath a {
  top: 140px;
  left: 55px;
}

.imagemap .cath a .inner {
  width: 60px;
  height: 80px;
}

.imagemap .james a {
  top: 140px;
  left: 145px;
}

.imagemap .paul a {
  top: 165px;
  left: 245px;
}

.imagemap .paul a .inner {
  width: 60px;
  height: 80px;
}



.imagemap a .note {
  position: absolute;
  bottom: -3em;
  width: 7.4em;
  padding: 0.2em 0.5em;
  background-color:#ffc;
  text-align: center;
  left: -30000px;
  margin-left: -4em;
	white-space: nowrap;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
}

.imagemap a:hover .note,
.imagemap a:focus .note {
  left: 25px;
	z-index: 1;
}

.imagemap .cath a:hover .note,
.imagemap .paul a:hover .note {
  left: 30px;
	z-index: 1;
}





-->
</style>
</head>

<body>

<div class="imagemap">
<img src="img/nerdcore.jpg" width="333" height="500" alt="Some of the Clearleft team" />
<ul>
<li class="rich">
	<a href="http://www.clagnut.com/" title="Richard Rutter">
	<span class="outer">
	<span class="inner">
	<span class="note">Richard Rutter</span>
	</span>
	</span>
	</a>
</li>

<li class="sophie">
	<a href="http://www.wellieswithwings.org/" title="Sophie Barrett">
	<span class="outer">
	<span class="inner">
	<span class="note">Sophie Barrett</span>
	</span>
	</span>
	</a>
</li>

<li class="cath">
	<a href="http://www.electricelephant.com/" title="Cathy Jones">
	<span class="outer">
	<span class="inner">
	<span class="note">Cathy Jones</span>
	</span>
	</span>
	</a>
</li>

<li class="james">
<a href="http://www.jeckecko.net/blog/" title="James Box">
	<span class="outer">
	<span class="inner">
	<span class="note">James Box</span>
	</span>
	</span>
</a>
</li>

<li class="paul">
	<a href="http://twitter.com/nicepaul" title="Paul Annett">
	<span class="outer">
	<span class="inner">
	<span class="note">Paul Annett</span>
	</span>
	</span>
	</a>
</li>

</ul>
</div>


</body>
</html>
